<template>
  <div class="base-container">
    <t-row>
      <t-col :span="12">
        <t-form ref="form" :data="queryParams" label-width="80" @reset="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}" @submit="()=>{this.pagination.current=1;this.queryParams.pageNum=1;this.getList()}">

          <t-row style="border-bottom: 1px solid #E5E6EB;margin-bottom: 10px">
            <t-col :span="11" class="query-form-inline">
              <t-form-item label="登录名称" name="userName">
                <t-input
                  v-model="queryParams.userName"
                  clearable
                  placeholder="请输入用户名称"
                  style="width: 240px"
                />
              </t-form-item>
              <t-form-item label="真实姓名" name="nickName">
                <t-input
                  v-model="queryParams.nickName"
                  clearable
                  placeholder="请输入真实姓名"
                  style="width: 240px"
                />
              </t-form-item>
              <t-form-item label="单位" name="deptId">
                <t-tree-select  style="width: 240px" clearable filterable :treeProps="{keys: {value: 'id'}}" v-model="queryParams.deptId"
                                :data="deptOptions" placeholder="选择单位"></t-tree-select>
              </t-form-item>
              <!--              <t-form-item label="创建时间" name="status">-->
              <!--                <t-date-range-picker v-model="queryParams.dateRange" :placeholder="['开始时间','结束时间']"  clearable/>-->
              <!--              </t-form-item>-->
            </t-col>
            <t-col :span="1" class="operation-container">
              <t-button theme="primary" type="submit">查询</t-button>
              <t-button theme="default" variant="outline" type="reset">重置</t-button>
            </t-col>
          </t-row>
        </t-form>
        <t-table
          rowKey="id"
          :data="data"
          :columns="columns"
          hover
          :pagination="pagination"
          :loading="dataLoading"
        >
          <template #op="{ row }">
            <t-button  @click="logoutUser(row)" size="small" variant="text" class="t-button-link">
              <t-icon name="logout" slot="icon"/>
              强制下线
            </t-button>
          </template>
        </t-table>
      </t-col>
    </t-row>
  </div>
</template>

<script>

export default {
  name: "online-index",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: {
  },
  data() {
    return {
      deptName: "",
      deptNameTreeValue:[],
      userId:0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: "",
        nickName: "",
        phonenumber: "",
        status: "",
        deptId: null,
        dateRange:[],
      },
      data: [],
      deptOptions: undefined,
      filterByText: null,
      columns: [
        // {
        //   colKey: "id",
        //   title: "用户编号",
        //   align: "center"
        // },
        {
          colKey: "userName",
          title: "登录名称",
          align: "center"
        },
        {
          colKey: "nickName",
          title: "真实姓名",
          align: "center"
        },
        {
          colKey: "deptName",
          title: "单位",
          align: "center"
        },
        {
          colKey: "ipaddr",
          title: "登录Ip",
          align: "center"
        },
        {
          colKey: "loginTimeString",
          title: "登录时间",
          align: "center"
        },
        {
          colKey: "op",
          title: "操作",
          align: "center",
          width: 120,
        },
      ],
      dataLoading: false,
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
        showPageSize: false,
        showFirstAndLastPageBtn: false,
      },
      dialog: {
        header: "",
        open_add_edit_user: false,
        open_reset_user_password: false,
        userId:0,
        userName:""
      }
    }
  },
  created() {
    this.getList();
    this.getTreeselect();
  },
  methods: {
    getList(){
      this.dataLoading = true;
      this.queryParams.pageNum = this.pagination.current || 1;
      this.$api.system.user.onLineList(this.queryParams).then(
        (res) => {
          this.data = res.rows;
          this.pagination.total = res.total;
          this.dataLoading = false;
        }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      });
    },
    onSubmit() {
      this.getList();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      this.$api.system.dept.treeSelect().then((res) => {
        this.deptOptions = res.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    logoutUser(row){
      const confirmDia = this.$dialog.confirm({
        header:"系统提示",
        body:`是否确认强制下线用户为"${row.nickName}"的数据项？`,
        theme: "warning",
        onConfirm: ({ e }) => {
          confirmDia.update({
            confirmBtn: {
              loading: true,
            },
          })
          this.$api.system.user.logoutUser(row.tokenId).then(
            (res) => {
              this.getList();
              this.$message.success("操作成功");
              // 请求成功后，销毁弹框
              confirmDia.destroy();
            }
          ).catch((e) => {
            confirmDia.update({
              confirmBtn: {
                loading: false,
              },
            })
            this.$message.error(e.toString());
          });
        },
      })
    },
  }
}
</script>

<style scoped>
</style>
